<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>每日计划表</title>
    <link rel="stylesheet" href="../common/style/reset.css" />
    <link rel="stylesheet" href="../common/style/xiaolai.css">
    <style>
      :root{
        --planner-box-padding: 3vw;
        --planner-px: 6.7vw; /* 20px */
        --planner-size: 3vw;
      }

      @media screen and (min-width: 420px) {
        :root{
          --planner-box-padding: 10px;
          --planner-px: 30px;
          --planner-size: 12px;
        }

        .box-border .date-planner-box .date-planner-title{
          font-size: 20px;
        }

        .todo-content-box .todo-content-list label{
          padding: 6px;
        }

        .todo-content-box .todo-content-list label .checkbox-box{
          top: 7px;
          width: var(--planner-size);
          height: var(--planner-size);
        }
      }

      .view{
        /* padding: 20px; */
        width: 100%;
        height: 100%;
        font-family:'Xiaolai SC';
        color: #000;
        position: relative;
        background-color: #fde5b6;
      }

      .round1{
        width: 10vw;
        height: 10vw;
        border-radius: 50%;
        background-color: #ffd28f;
        position: absolute;
        left: 5vw;
        top: 5vw;
      }

      .round2{
        width: 15vw;
        height: 15vw;
        border-radius: 50%;
        background-color: #ffd28f;
        position: absolute;
        left: 20vw;
        top: 9vw;
      }

      .round3{
        width: 15vw;
        height: 15vw;
        border-radius: 50%;
        background-color: #ffd28f;
        position: absolute;
        right: 40vw;
        top: 3vw;
      }

      .round4{
        width: 5vw;
        height: 5vw;
        border-radius: 50%;
        background-color: #ffd28f;
        position: absolute;
        right: 20vw;
        top: 3vw;
      }

      .round4{
        width: 7vw;
        height: 7vw;
        border-radius: 50%;
        background-color: #ffd28f;
        position: absolute;
        right: 20vw;
        top: 3vw;
      }
      

      .round5{
        width: 50vw;
        height: 50vw;
        border-radius: 50%;
        background-color: #ffd28f;
        position: absolute;
        right: -15vw;
        bottom: 35vw;
      }

      .round6{
        width: 60vw;
        height: 60vw;
        border-radius: 50%;
        background-color: #ffd28f;
        position: absolute;
        right: 10vw;
        bottom: -20vw;
      }


      .round9{
        width: 50vw;
        height: 50vw;
        border-radius: 50%;
        background-color: #ffd28f;
        position: absolute;
        left: -15vw;
        top: 35vw;
      }

      .planner-box{
        width: 100%;
        height: 100%;
        padding: var(--planner-box-padding);
        position: absolute;
        left: 0;
        top: 0;
      }

      .planner-title{
        font-size: var(--planner-px);
        color: #fff;
        font-weight: 700;
        text-align: center;
        text-shadow: 
                -1px -1px 0 #c59749,  
                 1px -1px 0 #c59749,
                -1px  1px 0 #c59749,
                 1px  1px 0 #c59749;
        margin-bottom: var(--planner-px);
      }

      .box-border{
        border: 1px solid #fdce82;
        border-radius: 5px;
        width: 100%;
        height: calc(100% - var(--planner-px) * 2);
        background-color: rgba(255, 255, 255, 0.8);
        padding: 2.8vw;
        display: flex;
        justify-content: space-between;
      }

      .date-planner-box{
        width: calc(55% - 2.8vw);
        height: 100%;
        display: flex;
        flex-direction: column;
      }

      .other-planner-box{
        width: calc(45% - 2.8vw);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .date-planner-box .date-planner-title{
        display: flex;
        justify-content: space-between;
        font-size: 4vw;
      }

      .date-planner-box .date-planner-title .date-title{
        width: 15vw;
        margin-right: 3px;
        color: #fff;
        background-color: #edb55e;
        border-radius: 3px;
        text-align: center;
        padding: 1.5vw 0;
      }
      .date-planner-box .date-planner-title .content-title{
        flex: 1;
        color: #fff;
        background-color: #edb55e;
        border-radius: 3px;
        text-align: center;
        padding: 1.5vw 0;
      }

      .date-planner-list{
        width: 100%;
        flex: 1;
        overflow-y: auto;
      }

       /* 滚动槽 */
      ::-webkit-scrollbar {
        width: 3px;
        height: 3px;
      }
      ::-webkit-scrollbar-track {
        border-radius: 3px;
        background: rgba(255,255,255,0);
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);
      }
      /* 滚动条滑块 */
      ::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: rgba(0,0,0,0.12);
        -webkit-box-shadow: inset 0 0 10px rgba(253, 229, 182,1);;
      }

      .date-planner-item{
        display: flex;
        align-items: center;
        padding: 1vw 0;
        position: relative;
      }

      .date-planner-item ~ .date-planner-item{
        /* 虚线 */
        border-top: 1px dashed #fde5b6;
        margin-top: -2px;
      }

      .date-planner-item:hover .date-planner-svg{
        display: block;
      }

      .date-planner-svg{
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto 0;
        font-size: var(--planner-size);
        color: #ddd;
        display: none;
        cursor: pointer;
      }


      .date-planner-date{
        width: 15vw;
        /* height: 20px; */
        text-align: center;
        background-color: #fbefdf;
        padding: 1.5vw;
      }

      .date-planner-date input {
        display: block;
        width: 100%;
        border: none;
        outline: none;
        height: 100%;
        text-align: center;
        background-color: transparent;
        font-size: var(--planner-size);
      }

      .date-planner-content{
        flex: 1;
        /* min-height: 16px; */
        padding: 0.8vw 1.5vw;
        word-break: break-all;
        outline: none;
        font-size: var(--planner-size);
      }

      .date-planner-content:empty:before{
        content: attr(data-placeholder);
        color: #999;
        display: block; 
      }

      .date-planner-content:focus:before,
      .date-planner-content:not(:empty):before {
        content: none;
      }

      .other-planner-card{
        height: 33%;
      }

      .other-title{
        background-color: #edb55e;
        padding: 0.5vw 0;
        border-radius: 3px;
        color: #fff;
        text-align: center;
        margin-bottom: 2px;
        font-size: 4vw;
      }
      .other-border{
        border: 1px solid #edb55e;
        height: calc(100% - (4vw + 2vw));
        overflow-y: auto;
        padding: 1.5vw;
        
      }

      /* 滚动槽 */
      .other-border::-webkit-scrollbar {
        width: 3px;
        height: 3px;
      }
      .other-border::-webkit-scrollbar-track {
        border-radius: 3px;
        background: rgba(255,255,255,1);
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);
      }
      /* 滚动条滑块 */
      .other-border::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: rgba(0,0,0,0.12);
        -webkit-box-shadow: inset 0 0 10px rgba(253, 229, 182,1);;
      }


      .important-content div{
        border: none;
        outline: none;
        width: 100%;
        font-size: var(--planner-size);
      }

      .important-content-text:empty:before{
        content: attr(data-placeholder);
        color: #999;
        display: block; 
      }

      .important-content-text:focus:before,
      .important-content-text:not(:empty):before {
        content: none;
      }

      .todo-content-list label{
        display: block;
        position: relative;
        padding: 1.3vw 0;
      }

      .todo-content-list label ~ label{
        border-top: 1px dashed #fde5b6;
      }

      .todo-content-list label input{
        display: none;
      }

      .todo-content-list label:hover .date-planner-svg {
        display: block;
      }

      .todo-content-list label .checkbox-box{
        position: absolute;
        width: 2.7vw;
        height: 2.7vw;
        left: 0px;
        top: 1.7vw;
        border-radius: 2px;
        border: 1px solid #edb55e;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .completed-todo.todo-content-list label .checkbox-box{
        border: 1px solid #aaa;
      }

      .checkbox-correct{
        display: none;
        font-size: var(--planner-size);
      }


      .todo-content-list label input:checked + .checkbox-box .checkbox-correct{
        display: block;
      }

      .todo-content-list label input:checked ~ .todo-content-text span{
        animation: line 0.5s forwards;
      }

      .completed-todo.todo-content-list label input:checked + .checkbox-box .checkbox-correct{
        color: #aaa;
      }

      .todo-content-text{
        width: 100%;
        /* min-height: 14px;
        line-height: 14px; */
        font-size: var(--planner-size);
        text-indent: calc(var(--planner-size) + 4px);
        word-break: break-all;
        outline: none;
      }

      .completed-todo .todo-content-text{
        color: #aaa;
      }

      .todo-content-text span{
        background: linear-gradient(to right, #f1ce87, #f1ce87) no-repeat;
        background-size: 0% 2px;
        background-position: center left;
      }

      @keyframes line {
        0% {
          background: linear-gradient(to right, #f1ce87, #f1ce87) no-repeat;
          background-size: 0% 2px;
          background-position: center left;
        }

        100% {
          background-size: 100% 2px;
        }
      }

      .todo-content-text:empty:before{
        content: attr(data-placeholder);
        color: #999;
        display: block; 
      }

      .todo-content-text:focus:before,
      .todo-content-text:not(:empty):before {
        content: none;
      }

      .new-item{
        width: 100%;
        height: 2px;
        background-color: rgb(237, 181, 94);
        /* 阴影发光 */
        box-shadow: 0 0 10px rgba(237,181,94,0.5);

      }


    </style>
  </head>
  <body>
    <div class="view">
      <div class="round1"></div>
      <div class="round2"></div>
      <div class="round3"></div>
      <div class="round4"></div>
      <div class="round5"></div>
      <div class="round6"></div>
      <div class="round9"></div>
      <div class="planner-box">
        <div class="planner-title">每日计划表</div>
        <div class="box-border">
          <div class="date-planner-box">
            <div class="date-planner-title">
              <div class="date-title">时间</div>
              <div class="content-title">内容</div>
            </div>
            <div class="date-planner-list" data-index="end">
            </div>
          </div>
          <div class="other-planner-box">
            <div class="important-content-box other-planner-card">
              <div class="important-content-title other-title">记录</div>
              <div class="important-content other-border">
                <div class="important-content-text" data-placeholder="请输入内容..." contenteditable="plaintext-only" style="height: 100%;"></div>
              </div>
            </div>
            <div class="todo-content-box other-planner-card">
              <div class="todo-content-title add-todo other-title">待办事项（未完成）</div>
              <div class="todo-content-list other-border" data-index="end">
              </div>
            </div>
            <div class="todo-content-box other-planner-card">
              <div class="todo-content-title other-title">待办事项（已完成）</div>
              <div class="completed-todo todo-content-list other-border" data-index="end"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script type="module" src="../common/js/setting.js"></script>
  <script type="module" src="../common/js/menu.js"></script>
  <script type="module" src="../common/js/move.js"></script>
  <script type="module" src="../common/js/counter.js"></script>
  <script type="module">
    import IconSvg from '../components/IconSvg/IconSvg.js'
    import { debounce } from '../common/utils/utils.js'
    customElements.define('icon-svg', IconSvg)

    let data = {
      datePlanner: [
        {
          date: '08:00',
          content: '双击编辑'
        }, 
        {
          date: '09:00',
          content: '点击标题头添加'
        },
      ],
      todoContent: {
        list: ['这是一个待办事项'],
        completedList: ['这是一个已完成待办事项']
      },
      importantContent: ''
    };
    let isdblClick = false, timeoutId, clickCount = 0;


    if(window.ipcRenderer){
      window.ipcRenderer.on('init', (event, res)=>{
        data = res || data;
        importantContentEl.innerText = data.importantContent;
        render()
        todoRender()
        completedTodoRender()
      })
    }

    // const datePlannerDateEl = document.querySelector('.date-planner-date input');
    // const datePlannerContentEl = document.querySelector('.date-planner-content');

    const datePlannerListEl = document.querySelector('.date-planner-list');
    const datePlannerTitleEl = document.querySelector('.date-planner-title');
    const todoContentListEl = document.querySelector('.todo-content-list');
    const completedTodoEl = document.querySelector('.completed-todo');
    const addTodoEl = document.querySelector('.add-todo');
    const importantContentEl = document.querySelector('.important-content-text');

    importantContentEl.addEventListener('input', debounce(function (e) {
      data.importantContent = e.target.innerText;
      if(window.sendSaveData){
        window.sendSaveData(data);
      }
    },1000));

    const clickToDo = (el,index,isCorrect) => {
      let checkEl = el.querySelector('.todo-input');
      let todoContentTextEl = el.querySelector('.todo-content-text');
      let text = todoContentTextEl.innerText;
      if(!text){
        data.todoContent.list.splice(index, 1);
        todoRender();
      }
      todoContentTextEl.innerHTML = `<span>${text}</span>`;
      if(isCorrect){
        checkEl.checked = true;
        todoContentTextEl.querySelector('span').addEventListener('animationend', function (e) {
          let unTodo =  data.todoContent.list.splice(index, 1);
          data.todoContent.completedList.unshift(unTodo[0]);
          
          todoRender();
          completedTodoRender();
        });
      }else{
        checkEl.checked = false;
        let todo =  data.todoContent.completedList.splice(index, 1);
        data.todoContent.list.unshift(todo[0]);
          
        todoRender();
        completedTodoRender();
      }
    };
    const dblToDo = (el) => {
      let todoContentTextEl = el.querySelector('.todo-content-text');
      todoContentTextEl.setAttribute('contenteditable','plaintext-only');
      todoContentTextEl.focus();
    };


    addTodoEl.addEventListener('click', window.triggerHandle(function (e) {
      data.todoContent.list.push('');
      todoRender();
    }));
    
    const todoRender = () => {
      todoContentListEl.innerHTML = '';
      data.todoContent.list.forEach((item,index)=>{
        const labelEl = document.createElement('label');
        labelEl.setAttribute('draggable', true);
        labelEl.setAttribute('data-index', index);
        labelEl.innerHTML = `
          <input class="todo-input" type="checkbox">
          <div class="checkbox-box"><icon-svg class="checkbox-correct" name="correct" /></div>
          <div class="todo-content-text" contenteditable="false" data-placeholder="请输入内容..." >${item}</div>
          <icon-svg class="date-planner-svg" name="closure" />`
        
        
        let checkEl = labelEl.querySelector('input');
        let todoContentTextEl = labelEl.querySelector('.todo-content-text');
        let datePlannerSvg = labelEl.querySelector('.date-planner-svg');
        labelEl.addEventListener('click', window.triggerHandle(function (e) {
          e.preventDefault();
          clickCount++;
          clearTimeout(timeoutId);

          timeoutId  = setTimeout(()=>{
            if (clickCount === 1) {
              clickToDo(this, index, true);
            } else if (clickCount === 2) {
              dblToDo(this,index);
            }
            clickCount = 0;
          }, 300)

        }))

        labelEl.addEventListener('drop', (e)=>todoDropHandle(e,'list'));
        labelEl.addEventListener('mousedown', (e)=>e.stopPropagation())
        todoContentTextEl.addEventListener('click', window.triggerHandle(function (e) {
          if(document.activeElement == this){
            e.stopPropagation();
            e.preventDefault();
          }
        }))
        todoContentTextEl.addEventListener('blur', function (e) {
          if(this.innerText){
            data.todoContent.list[index] = this.innerText;
          }
          this.setAttribute('contenteditable','false');
          if(window.sendSaveData){
            window.sendSaveData(data);
          }
        })

        datePlannerSvg.addEventListener('click', window.triggerHandle(function (e) {
          e.stopPropagation();
          e.preventDefault();
          data.todoContent.list.splice(index, 1);
          todoRender();
          completedTodoRender();
        }))
        

        todoContentListEl.appendChild(labelEl);
      })
    }

    const completedTodoRender = () => {
      completedTodoEl.innerHTML = '';
      data.todoContent.completedList.forEach((item,index)=>{
        const labelEl = document.createElement('label');
        labelEl.setAttribute('draggable', true);
        labelEl.setAttribute('data-index', index);
        labelEl.innerHTML = `
          <input class="todo-input" checked type="checkbox">
          <div class="checkbox-box"><icon-svg class="checkbox-correct" name="correct" /></div>
          <div class="todo-content-text" contenteditable="false" data-placeholder="请输入内容..." >${item}</div>
          <icon-svg class="date-planner-svg" name="closure" />`
        
        
        let checkEl = labelEl.querySelector('input');
        let todoContentTextEl = labelEl.querySelector('.todo-content-text');
        let datePlannerSvgEl = labelEl.querySelector('.date-planner-svg');
        labelEl.addEventListener('click', window.triggerHandle(function (e) {
          e.preventDefault();
          clickCount++;
          clearTimeout(timeoutId);

          timeoutId  = setTimeout(()=>{
            if (clickCount === 1) {
              clickToDo(this, index);
            } else if (clickCount === 2) {
              dblToDo(this,index);
            }
            clickCount = 0;
          }, 300)

        }))

        labelEl.addEventListener('drop', (e)=>todoDropHandle(e,'completedList'))
        labelEl.addEventListener('mousedown', (e)=>e.stopPropagation())

        todoContentTextEl.addEventListener('click', window.triggerHandle(function (e) {
          if(document.activeElement == this){
            e.stopPropagation();
            e.preventDefault();
          }
        }))
        todoContentTextEl.addEventListener('blur', function (e) {
          if(this.innerText){
            data.todoContent.completedList[index] = this.innerText;
          }
          this.setAttribute('contenteditable','false');
          if(window.sendSaveData){
            window.sendSaveData(data);
          }
        })

        datePlannerSvgEl.addEventListener('click', window.triggerHandle(function (e) {
          e.stopPropagation();
          e.preventDefault();
          // console.log(data.todoContent);
          data.todoContent.completedList.splice(index, 1);
          // console.log(data.todoContent);
          todoRender();
          completedTodoRender();
        }))

        completedTodoEl.appendChild(labelEl);
        if(window.sendSaveData){
          window.sendSaveData(data);
        }
      })
    }


    const render = () => {
      datePlannerListEl.innerHTML = '';
      data.datePlanner.forEach((item, index) => {
        const datePlannerItemEl = document.createElement('div');
        const datePlannerDateInputEl = document.createElement('input');
        const datePlannerContentEl = document.createElement('div');
        const datePlannerDateEl = document.createElement('div');
        datePlannerItemEl.classList.add('date-planner-item');
        datePlannerDateEl.classList.add('date-planner-date');
        datePlannerItemEl.setAttribute('draggable', true);
        datePlannerContentEl.classList.add('date-planner-content');
        datePlannerContentEl.setAttribute('contenteditable','false');
        datePlannerContentEl.setAttribute('data-placeholder','请输入内容...');
        datePlannerItemEl.setAttribute('data-index', index);
        datePlannerContentEl.innerText = item.content || '';
        datePlannerDateInputEl.value = item.date || '';

        datePlannerDateInputEl.type = 'text';
        datePlannerDateInputEl.placeholder = '时间';
        datePlannerDateInputEl.readOnly = true;

        datePlannerDateInputEl.addEventListener('dblclick', function (){
          this.readOnly = false;
        })

        datePlannerDateInputEl.addEventListener('blur', function (){
          data.datePlanner[index].date = this.value;
          this.readOnly = true;
          if(window.sendSaveData){
            window.sendSaveData(data);
          }
        })

        datePlannerContentEl.addEventListener('dblclick', function (){
          this.setAttribute('contenteditable','plaintext-only');
          this.focus();
        })

        datePlannerContentEl.addEventListener('blur', function (){
          data.datePlanner[index].content = this.innerText;
          this.setAttribute('contenteditable','false');
          if(window.sendSaveData){
            window.sendSaveData(data);
          }
        })
        datePlannerItemEl.innerHTML = `<icon-svg class="date-planner-svg" name="closure" />`;

        datePlannerItemEl.querySelector('.date-planner-svg').addEventListener('click', window.triggerHandle(function (){
          data.datePlanner.splice(index, 1);
          render();
        }))

        datePlannerDateEl.appendChild(datePlannerDateInputEl);
        datePlannerItemEl.appendChild(datePlannerDateEl);
        datePlannerItemEl.appendChild(datePlannerContentEl);
        datePlannerListEl.appendChild(datePlannerItemEl);

        datePlannerItemEl.addEventListener('drop', (e)=>dropHandle(e,'datePlanner'))
        datePlannerItemEl.addEventListener('mousedown', (e)=>e.stopPropagation())
        if(window.sendSaveData){
          window.sendSaveData(data);
        }
      })
    }


    datePlannerTitleEl.addEventListener('click', window.triggerHandle(function (){
      data.datePlanner.push({
        date: '',
        content: ''
      })
      render();
    }))

    const dragstartHandle = function (e){
      let dragIndex = e.target.getAttribute('data-index');
      e.dataTransfer.setData('text/plain', dragIndex);
      currentDraggedItem = e.currentTarget;
    }

    const dragoverHandle = function (e){
      e.preventDefault();
      e.dataTransfer.dropEffect = "move";
      // currentDraggedItem 内部是否包含 某个元素
      if(!(currentDraggedItem.contains(e.target) || currentDraggedItem === e.target)){
        // 禁止拖拽
        e.dataTransfer.dropEffect = "none";
        e.preventDefault();
        return;
      }
    }
    let currentDraggedItem = null;
    datePlannerListEl.addEventListener('dragstart', dragstartHandle);
    todoContentListEl.addEventListener('dragstart', dragstartHandle);
    completedTodoEl.addEventListener('dragstart', dragstartHandle);


    datePlannerListEl.addEventListener('dragover', dragoverHandle);
    todoContentListEl.addEventListener('dragover', dragoverHandle);
    completedTodoEl.addEventListener('dragover', dragoverHandle);
    importantContentEl.addEventListener('dragover', dragoverHandle);

    const directionInsert = (e) => {
      let height = e.currentTarget.offsetHeight;
      if (e.layerY < height / 2) {
        return 'beforebegin'
      } else {
        return 'afterend'
      }
    }

    const dropHandle = (e, name)=>{
      e.stopPropagation();
      let dropIndex = e.currentTarget.getAttribute('data-index');
      let dragIndex = parseInt(e.dataTransfer.getData('text/plain'));

      if(dropIndex === 'end'){
        dropIndex = data[name].length;
      }else if(dropIndex === 'start'){
        dropIndex = 0;
      }else if(dropIndex !== null){
        let direction = directionInsert(e)
        let index = parseInt(e.currentTarget.getAttribute('data-index'))
        if(direction === 'beforebegin'){
          dropIndex = index;
        }else{
          dropIndex = index + 1;
        }
      }else if(dropIndex === dragIndex){
        return;
      }else{
        return;
      }

      const temp = data[name][dragIndex];
      data[name][dragIndex] = '';
      data[name].splice(dropIndex, 0, temp)
      data[name] = data[name].filter(item=>item)
      render();
    }


    const todoDropHandle = (e, name)=>{
      e.stopPropagation();
      let dropIndex = e.currentTarget.getAttribute('data-index');
      let dragIndex = parseInt(e.dataTransfer.getData('text/plain'));

      if(dropIndex === 'end'){
        dropIndex = data.todoContent[name].length;
      }else if(dropIndex === 'start'){
        dropIndex = 0;
      }else if(dropIndex !== null){
        let direction = directionInsert(e)
        let index = parseInt(e.currentTarget.getAttribute('data-index'))
        if(direction === 'beforebegin'){
          dropIndex = index;
        }else{
          dropIndex = index + 1;
        }
      }else if(dropIndex === dragIndex){
        return;
      }else{
        return;
      }

      const temp = data.todoContent[name][dragIndex];
      data.todoContent[name][dragIndex] = '';
      data.todoContent[name].splice(dropIndex, 0, temp)
      data.todoContent[name] = data.todoContent[name].filter(item=>item)
      if(name === 'list'){
        todoRender();
      }else{
        completedTodoRender();
      }
    }

    datePlannerListEl.addEventListener('drop' , (e)=>dropHandle(e, 'datePlanner'));
    todoContentListEl.addEventListener('drop' , (e)=>todoDropHandle(e, 'list'));
    completedTodoEl.addEventListener('drop' , (e)=>todoDropHandle(e, 'completedList'));
    

    window.getData = ()=>data;
  </script>
</html>
